<template>
  <view>
    
    <view class="icons" @click="handleShowAlert" v-show="warningList.length > 0">
                <svg t="1762589233445" 
                viewBox="0 0 1024 1024" 
                version="1.1" 
                xmlns="http://www.w3.org/2000/svg" 
                p-id="4776" width="14" height="14">
                <path d="M877.714286 658.285714 877.714286 365.714286C877.714286 163.766857 713.947429 0 512 0 310.052571 0 146.285714 163.766857 146.285714 365.714286L146.285714 658.285714 0 950.857143 409.014857 950.857143C424.118857 993.389714 464.274286 1024 512 1024 559.725714 1024 599.881143 993.389714 614.985143 950.857143L1024 950.857143 877.714286 658.285714" fill="#d81e06" p-id="4777">

                </path></svg>
    </view>
    
  </view>
 
</template>

<script setup>

defineOptions({
  name: 'WarningModalIcon',
  
})

const props = defineProps({
  deviceSn: { type: String, default: '' },
  title: { type: String, default: '错误信息' }
})

const visible = defineModel({
  type: Boolean,
  default: false
})

const cookingStore = useCookingStore()

const warningList = computed(() => {
   console.log('item', props.deviceSn) 
  const warnings = []
  const cookInfo = cookingStore.getLatestCookInfoForDevice(props.deviceSn)
  if (cookInfo && cookInfo.stepFaildReason && cookInfo.stepFaildReason.length > 0) {
    cookInfo.stepFaildReason.forEach(warning => {
      warnings.push({...warning})
    })
  }
  
  return warnings
})


const itemText = computed(() => (item) => {
  return `步骤${item.step * 1 + 1}：${item.reason}-${new Date(item.time).toLocaleString()}`
})


const handleShowAlert = () => {
  visible.value = true
  uni.showModal({
    cancelText: '×',
    confirmText: ' ',
    title: props.title,
    content: warningList.value.map(item => itemText.value(item)).join('\n'),
  })
}

</script>

<style scoped lang="scss">
@import '@/styles/variables.scss';

.icons {
  padding-top: 4rpx;
  text-align: center;
}
</style>
